<template>
  <view class="pages">
    <custom-bar :title="title" @height="setNavHeight"></custom-bar>
    <view class="body">
        <view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 消息列表
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
					<view class="content">
						<view class="text-grey">凯尔</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
							</view> </view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cu-tag round bg-grey sm">5</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
						<view class="cu-tag badge">99+</view>
					</view>
					<view class="content">
						<view class="text-grey">
							<view class="text-cut">瓦洛兰之盾-塔里克</view>
							<view class="cu-tag round bg-orange sm">战士</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
							</view>
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cuIcon-notice_forbid_fill text-gray"></view>
					</view>
				</view>
				<view class="cu-item ">
					<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
					<view class="content">
						<view class="text-pink"><view class="text-cut">莫甘娜</view></view>
						<view class="text-gray text-sm flex"> <view class="text-cut">凯尔，你被自己的光芒变的盲目！</view></view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cu-tag round bg-red sm">5</view>
					</view>
				</view>
				<view class="cu-item grayscale">
					<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
					<view class="content">
						<view><view class="text-cut">伊泽瑞尔</view>
							<view class="cu-tag round bg-orange sm">断开连接...</view>
						</view>
						<view class="text-gray text-sm flex"> <view class="text-cut"> 等我回来一个打十个</view></view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cu-tag round bg-red sm">5</view>
					</view>
				</view>
				<view class="cu-item cur">
					<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
						<view class="cu-tag badge"></view>
					</view>
					<view class="content">
						<view>
							<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
							<view class="cu-tag round bg-orange sm">6人</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cuIcon-notice_forbid_fill text-gray"></view>
					</view>
				</view>
			</view>
    </view>
    <view class="sundry">
      <image class="image" src="http://139.9.40.245/colors/8.png"></image>
      <image class="image" src="http://139.9.40.245/colors/17.png"></image>
      <image class="image" src="http://139.9.40.245/colors/22.png"></image>
      <image class="image" src="http://139.9.40.245/colors/24.png"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import CustomBar from "@/components/CustomBar/CustomBar.vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
const title = ref("地址列表");
onLoad((options) => {
    console.log('options', options)
})
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  width: 100%;
  background: url("http://139.9.40.245/colors/bg-top2.jpg") no-repeat top,
    url("http://139.9.40.245/colors/bg-bottom.jpg") no-repeat bottom, #ffffff;
  background-size: 100% 35%, 100% 16%;
  padding: 0 20rpx;
  .navbar {
    width: 100%;
    .search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .label {
        margin: 0 20rpx;
        color: #ffffff;
      }
      .search_input {
        height: 100%;
        width: 360rpx;
        border: 1rpx solid #ffffff;
        color: #ffffff;
        border-radius: 24rpx;
        padding: 6rpx 14rpx;
        font-size: 24rpx;
      }
    }
  }

  .header_info {
    padding-top: 20rpx;
    width: 710rpx;
    height: 454rpx;
  }

  .sundry {
    position: fixed;
    left: 0;
    bottom: 10rpx;
    width: 100%;
    height: 300rpx;
    pointer-events: none;

    $n: 4;
    $animationTime: 3;
    @for $i from 0 through $n {
      $delay: random($n);
      $x: random(100);
      $y: random(500);
      $randomAnimationTine: #{$animationTime + random(5) - 1}s;
      .image:nth-child(#{$i}) {
        position: absolute;
        right: 30rpx;
        bottom: 0rpx;
        width: 60rpx;
        height: 60rpx;
        transform: scale(0.5);
        animation: move-#{$i}
          $randomAnimationTine
          linear
          #{$delay *
          0.1s *
          -1}
          infinite;
      }

      @keyframes move-#{$i} {
        0% {
          opacity: 1;
          transform: scale(0.5);
          transform: translate(0, 0);
        }
        100% {
          opacity: 0.1;
          transform: scale(1);
          transform: translate(-#{$x}rpx, -#{$y}rpx);
        }
      }
    }
  }
}
</style>
